<!DOCTYPE html>
<html>
<head>
<title>Focus tests</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
<!--
<script type="text/javascript">less = {env: "development", async: false};</script>
<link rel="stylesheet/less" type="text/css" href="../../js/tinymce/skins/lightgray/skin.dev.less">
<script src="../../node_modules/less/dist/less-1.4.2.min.js"></script>
-->
<script src="../../js/tinymce/tinymce.dev.js"></script>
<script src="../../js/tinymce/plugins/table/plugin.dev.js"></script>
<script src="../../js/tinymce/plugins/paste/plugin.dev.js"></script>
<script src="../../js/tinymce/plugins/spellchecker/plugin.dev.js"></script>
<script>
	tinymce.init({
		selector: "textarea.editor",
		theme: "modern",
		plugins: [
			"advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
			"searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
			"save table contextmenu directionality emoticons template paste textcolor importcss"
		],
		add_unload_trigger: false,

		toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons table",

		setup: function(ed) {
			ed.on('focus blur activate deactivate', function(e) {
				console.log(e.type + ':' + ed.id);
			});
		}
	});

	tinymce.init({
		selector: "div.editor",
		inline: true,
		theme: "modern",
		plugins: [
			"advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
			"searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
			"save table contextmenu directionality emoticons template paste textcolor importcss"
		],
		add_unload_trigger: false,

		toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons table",

		setup: function(ed) {
			ed.on('focus blur activate deactivate', function(e) {
				console.log(e.type + ':' + ed.id);
			});
		}
	});

	if (!window.console) {
		console = {
			log: function(text) {
				document.body.appendChild(document.createTextNode(text));
				document.body.appendChild(document.createElement('br'));
			}
		};
	}
</script>
<style>
.editor {
	border: 1px dashed black;
}
</style>
</head>
<body id="root">
<form method="post" action="http://www.tinymce.com/dump.php?example=true">
	<div>
		<div>
			<textarea id="e1" class="editor">
				<p>e1</p>
				<table>
				<tbody>
				<tr>
				<td>Cell</td>
				</tr>
				</tbody>
				</table>
				<p>Text2</p>
				<div contenteditable="false">contentEditable:false</div>
				<div tabindex="1">Block with tabindex:1</div>
				<p>abc<span tabindex="1">Inline with tabindex:1</span>123</p>
			</textarea>

			<div>
				<button type="button">Button</button>
				<a href="#">Link</a>
				<button type="button" onclick="tinymce.activeEditor.execCommand('Bold');">Bold:active</button>
				<button type="button" onclick="tinymce.get('e1').execCommand('Bold');">Bold:e1</button>
			</div>

			<textarea id="e2" class="editor">
				<p>e2</p>
				<table>
				<tbody>
				<tr>
				<td>Cell</td>
				</tr>
				</tbody>
				</table>
				<p>Text2</p>
				<div contenteditable="false">contentEditable:false</div>
				<div tabindex="1">Block with tabindex:1</div>
				<p>abc<span tabindex="1">Inline with tabindex:1</span>123</p>
			</textarea>

			<div id="e3" class="editor">
				<p>e3</p>
				<table>
				<tbody>
				<tr>
				<td>Cell</td>
				</tr>
				</tbody>
				</table>
				<p>Text2</p>
				<div contenteditable="false">contentEditable:false</div>
				<div tabindex="1">Block with tabindex:1</div>
				<p>abc<span tabindex="1">Inline with tabindex:1</span>123</p>
			</div>

			<div id="e4" class="editor">
				<p>e4</p>
				<table>
				<tbody>
				<tr>
				<td>Cell</td>
				</tr>
				</tbody>
				</table>
				<p>Text2</p>
				<div contenteditable="false">contentEditable:false</div>
				<div tabindex="1">Block with tabindex:1</div>
				<p>abc<span tabindex="1">Inline with tabindex:1</span>123</p>
			</div>
		</div>

		<br />
		<input type="submit" name="save" value="Submit" />
		<input type="reset" name="reset" value="Reset" />
	</div>
</form>

</body>
</html>
